var urlParams = new URLSearchParams(location.search),
		pid = urlParams.get("pid"),
		uid= $.cookie("uid");
var $ul = $("#xc-img>ul")
var $mImg = $("#preview>div>img");
var $lgDiv = $("#div-lg");
$ul.on("mouseover", "img", function() {
	var $img = $(this);
	var md = $img.attr("data-md");
	$mImg.attr("src", md);
	$lgDiv.css(
		"backgroundImage", `url(${$img.attr("data-lg")})`
	)
})
$("#back").click(function(){
	history.back();
})
var $mask = $("#mask"),
	$smask = $("#super-mask");
var MSIZE = 176,
	SMSIZE = 550,
	MAX = SMSIZE - MSIZE;
$smask.hover(
	function() {
		$mask.toggleClass("d-none");
		$lgDiv.toggleClass("d-none");
	}
).mousemove(function(e) {
	var top = e.offsetY - MSIZE / 2;
	var left = e.offsetX - MSIZE / 2;
	if (top < 0) top = 0;
	else if (top > MAX) top = MAX;
	if (left < 0) left = 0;
	else if (left > MAX) left = MAX;
	$mask.css({
		top,
		left
	})
	$lgDiv.css(
		"backgroundPosition",
		`${-16/5*left}px ${-16/5*top}px`
	)
})

$(function() {
	$.ajax({
		type: "get",
		url: "/product/index_details",
		data: {
			pid: pid
		},
		dataType: "json",
		async: true,
		success: function(data) {
			console.log(data)
			var str = "";
			// 标题 价格
			str +=
				` <p class="xc_small">商品编码：NNKB18204100458</p>
           <h5>${data.title}</h5>
           <h4 class="text-primary pt-3">¥${data.price.toFixed(2)}</h4>`;
			$("#xc_xx").empty().append(str);
			//颜色
			str1 = "";
			for (var cl in data.color) {
				str1 += `  <div class="xc_img mr-2 xc_span text-center xc_small">${data.color[cl].color_name}</div>`
			}
			$("#xc-color").empty().append(str1);
			//尺码
			str2 = "";
			for (var sz in data.size) {
				str2 += ` <li><div class="xc_div text-center mr-2" name="size">${data.size[sz].size_name}</div></li>`
			}
			$("#xc-sizes").empty().append(str2);
			//描述
			str3 = " ";
			str3 += `${data.product_desc}`;
			$("#xc-ms").empty().append(str3);
			//图片
			strtp = "";
			for (var tp in data.pimg) {

				strtp +=
					`<li class="pt-1"><img src="${data.pimg[tp].small_img}" data-md="${data.pimg[tp].img}" data-lg="${data.pimg[tp].big_img}"></li>`
			}
			$("#tupianlujing").empty().append(strtp);
			//点击颜色出现蓝色边框
			var spanColor = document.getElementById("span-color");
			var colors = document.querySelectorAll("#color>div>div")
			for (var color of colors) {
				color.onclick = function() {
					var color = this;
					for (var div of colors) {
						div.className = "xc_img mr-2 xc_span text-center xc_small";
					}
					color.className = "xc_img1 mr-2 xc_span text-center xc_small";
					spanColor.className = "d-none";

				}
			}
			//点击尺码出现蓝色边框
			var spanSize = document.getElementById("span-size");
			var sizes = document.getElementsByName("size");
			for (var size of sizes) {
				size.onclick = function() {
					var size = this;
					for (var div of sizes) {
						div.className = "xc_div text-center mr-2 ";
					}
					size.className = "xc_div1 text-center mr-2"
					spanSize.className = "d-none"
				}
			}
			//数量加减功能
			//1. 查找所有button元素
			var divs = document.getElementById("btn")
			var btns = divs.getElementsByTagName("button")
			//var btns=document.querySelectorAll("#btn>button")
			//2. 遍历每个按钮
			for (var btn of btns) {
				btn.onclick = function() {
					//捷径: this->当前btn
					var btn = this;
					//3. 查找要修改的元素
					var input = btn.parentNode.children[1];
					//4. 修改元素
					var n = parseInt(input.innerHTML);

					if (btn == input.nextElementSibling) {
						if (n < 10) {
							n++;
						}
					} else if (n > 1) {
						n--;
					}
					input.innerHTML = n;
				}
			}
			//加入购物车
			$("#xz-shopping").click(function() {
				var a = $("#xc-color>div");
				//颜色
				for (var i = 0; i < a.length; i++) {
					if (a[i].className == "xc_img1 mr-2 xc_span text-center xc_small") {
						var _color = a[i].innerHTML
					}
				}
				//尺码
				var b = $("#xc-sizes>li>div");
				for (var i = 0; i < b.length; i++) {
					if (b[i].className == "xc_div1 text-center mr-2") {
						var _size = b[i].innerHTML;
					}
				}
				//价格
				var price = $("#xc_xx>h4");
				for (var i = 0; i < price.length; i++) {
					var _price = price[i].innerHTML.substring(1, 8);
				}
				//数量
				var number = $("#btn>span");
				for (var i = 0; i < number.length; i++) {
					var _number = number[i].innerHTML
				}
				//异步
				if (!_color || !_size) {
					alert("请选择颜色和尺码")
					/* console.log(_color);
              console.log(_size);*/
				} else if(!uid){
					alert("请先登录");
				} else {
					$.ajax({
						type: "post",
						url: "/shopping/add",
						data: {
							uid: uid,
							pid: pid,
							color: _color,
							size: _size,
						},
						dataType: "json",
						async: true,
						success: function(data) {}
					})
				}
			})
		}
	})
})
